<!--
 * @Author: 黄威
 * @Date: 2021-12-30 17:42:50
 * @LastEditors: 黄威
 * @LastEditTime: 2022-02-18 15:45:29
 * @Description: 右键菜单测试
-->
<template>
    <div>
        <el-button @contextmenu.native="showContextmenu">
            展示右键菜单（一）
        </el-button>
        <el-button @contextmenu.native="showContextmenu">
            展示右键菜单（二）
        </el-button>
        <el-button @contextmenu.native="showContextmenu">
            展示右键菜单（三）
        </el-button>
        <MgsContextmenu
            v-model="visible"
            :reference="reference"
            placement="bottom-start"
        >
            右键菜单测试
        </MgsContextmenu>
    </div>
</template>

<script>
import MgsContextmenu from '@mgs/components-basic/mgs-contextmuen.vue';

export default {
    components: { MgsContextmenu },
    data() {
        return {
            reference: null,
            visible: false,
        };
    },
    methods: {
        /**
         * @param {MouseEvent} evt
         */
        showContextmenu(evt) {
            if (this.reference === evt.currentTarget) {
                if (!this.visible) {
                    this.visible = true;
                } else {
                    this.reference = null;
                    this.visible = false;
                }
            } else {
                this.reference = evt.currentTarget;
                this.visible = true;
            }
            evt.preventDefault();
        },
    },
};
</script>

<style></style>
